<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教师-查看学生信息</title>
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/index.css">
</head>
<body>
<!-- 主体 -->
<div class="body-head"><span>学生信息管理&nbsp;>&nbsp;查看学生信息</span></div>

<%--<div class="body-from layui-form" id="demoForm">--%>
<%--    <div class="layui-form-item">--%>
<%--        <div class="layui-inline">--%>
<%--            <div class="layui-input-block" style="width: 200px;">--%>
<%--                <input type="text" name="year" id="yearSelector" placeholder="请输入毕业年度" class="layui-input">--%>
<%--            </div>--%>
<%--        </div>--%>
<%--        <div class="layui-inline">--%>
<%--            <button class="layui-btn layui-btn-normal layui-btn-sm" id="query">查询</button>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>
<div class="demoTable">
    <label class="layui-form-label">毕业年份：</label>
    <div class="layui-inline">
        <input class="layui-input" type="text" id="yearSelector">
    </div>
    <button class="layui-btn layui-btn-sm" data-type="reload" id="year-btn">搜索</button>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use(['table', 'jquery', 'form', 'laydate'], function () {
        let table = layui.table,
            $ = layui.$,
            form = layui.form,
            laydate = layui.laydate;


        laydate.render({
            elem: '#yearSelector', //指定元素
            type: 'year'
        });

        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            elem: '#test',
            url: '${ctx}/teacher/getStudentInfo.action',
            method: 'POST',
            toolbar: '#toolbarDemo',
            title: '学生信息表',
            page: true,
            limit: 10,
            limits: [3, 5, 10],
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'stuNo',
                    title: '学号',
                    width: 150,
                    sort: true,
                    edit: 'text'
                }, {
                    field: 'name',
                    title: '姓名',
                    width: 150,
                    edit: 'text'
                }, {
                    field: 'sex',
                    title: '性别',
                    width: 80,
                    edit: 'text',
                    sort: true
                }, {
                    field: 'age',
                    title: '年龄',
                    width: 80,
                    sort: true
                }, {
                    field: 'department',
                    title: '所在系',
                    width: 150,
                    edit: 'text'
                }, {
                    field: 'major',
                    title: '专业',
                    width: 165,
                    edit: 'text'
                }, {
                    field: 'phone',
                    title: '联系电话',
                    width: 150
                }, {
                    field: 'email',
                    title: '电子邮箱',
                    width: 200
                }, {
                    fixed: 'right',
                    align: 'center',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 150
                }]
            ],
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                let result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                }
            }
        });

        let year = $("#yearSelector");
        let active = {
            reload: function () {
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1  //重新从第1页开始
                    },
                    where: {
                        year: year.val()
                    }
                });
            }
        };

        $('#year-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //工具栏事件`
        /*table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            // console.log(obj.event=='batchDel');
            //console.log(obj.event);
            if (obj.event == 'batchDel') {
                let data = checkStatus.data;
                // console.log(data);
                if (data.length == 0) {
                    layer.alert("找不到需要删除的数据, 请选择你要删除的数据...");
                    return;
                }
                let arr = new Array(data.length);
                for (let i = 0; i < data.length; i++) {
                    // console.log(data[i].stuNo);
                    arr[i] = data[i].stuNo;
                }
                // console.log(arr);
                layer.confirm("删除后数据将无法恢复, 确定要删除吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                    $.ajax({
                        type: "post",
                        url: "${ctx}/teacher/batchDelStudents.action",
                        data: {arr: arr},
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        success: function (data) {
                            if (data.flag) {
                                layer.msg("删除成功");
                                setTimeout(() => {
                                    window.location.reload();
                                }, 1500);
                            } else {
                                layer.msg("删除失败");
                            }
                        },
                        error: function () {
                            layer.msg("请求失败");
                        }
                    })
                });
            }
        });*/

        table.on('tool(test)', function (obj) {

            switch (obj.event) {
                case 'edit':
                    //console.log(obj.data.stuNo);
                    let data = obj.data;

                    layer.open({
                        type: 1,
                        area: ['500px', '580px'],
                        title: '编辑',
                        content: $("#edit_form"),
                        shade: 0,
                        cancel: function (index) {
                            layer.closeAll();
                        }
                    });
                    //设置内容
                    $("#stuNo").val(data.stuNo);
                    $("#name").val(data.name);
                    if (data.sex != "男") {
                        $("#b").removeAttr("checked");
                        $("#g").attr("checked", true);
                    } else {
                        $("#g").removeAttr("checked");
                        $("#b").attr("checked", true);
                    }
                    $("#age").val(data.age);
                    $("#major").val(data.major);
                    $("#grade").val(data.grade);
                    $("#phone").val(data.phone);
                    $("#email").val(data.email);
                    //更新表单
                    form.render();
                    break;
                case 'del':
                    //获取学号
                    let stuNo = obj.data.stuNo;
                    // layer.msg(stuNo);
                    layer.confirm("删除后数据将无法恢复, 确定要删除吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                        $.ajax({
                            type: "post",
                            url: "${ctx}/teacher/deleteStudent.action",
                            data: {stuNo: stuNo},
                            dataType: "json",
                            contentType: "application/x-www-form-urlencoded",
                            success: function (data) {
                                if (data.flag) {
                                    layer.msg("删除成功");
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 1500);
                                } else {
                                    layer.msg("删除失败");
                                }
                            },
                            error: function () {
                                layer.msg("请求失败");
                            }
                        });
                    });
                    break;
            }
        });

        $("#btn").on("click", function () {
            if ($("#stuNo").val() == "") {
                layer.msg("学号不允许为空");
                return;
            } else if (!/^\d{10}$/.test($("#stuNo").val())) {
                layer.msg("学号格式不正确");
                return;
            } else if ($("#name").val() == "") {
                layer.msg("姓名不允许为空");
                return;
            } else if (!/^[\u4e00-\u9fa5]{2,6}$/.test($("#name").val())) {
                layer.msg("只能输入中文名字");
                return;
            } else if ($("#grade").val() == "") {
                layer.msg("年级项不允许为空");
                return;
            } else if (!/^\d{4}$/.test($("#grade").val())) {
                layer.msg("年级项只能输入4位数字");
                return;
            } else if ($("#phone").val() == "") {
                layer.msg("电话号码不允许为空");
                return;
            } else if (!/^1[3|4|5|7|8][0-9]{9}$/.test($("#phone").val())) {
                layer.msg("电话号码格式不正确");
                return;
            } else {
                layer.confirm("确定要提交吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                    $.ajax({
                        type: "post",
                        url: "${ctx}/teacher/updateStudent.action",
                        data: $("#edit_form").serialize(),
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        success: function (data) {
                            //console.log(data);
                            if (data.flag) {
                                layer.msg("修改成功");
                            } else {
                                layer.msg("修改失败");
                            }
                            setTimeout(() => {
                                window.location.reload()
                            }, 1500);

                        },
                        error: function () {
                            layer.msg("请求失败");
                        }
                    });
                    layer.closeAll('dialog');
                });
            }
        });

        $("#btnClose").on("click", function (index) {
            layer.closeAll();
        });

    });
</script>

<%--编辑表单弹出层--%>
<form class="layui-form" id="edit_form" style="display:none; margin-top: 16px">
    <div class="layui-form-item">
        <label class="layui-form-label mylabel">学号</label>
        <div class="layui-input-block">
            <input type="text" name="stuNo" id="stuNo" readonly="readonly" placeholder="请输入学生学号"
                   class="layui-input layui-disabled" style="width: 350px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label mylabel">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" placeholder="请输入学生姓名" class="layui-input" style="width: 350px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label mylabel">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" id="b" checked value="男" title="男">
            <input type="radio" name="sex" id="g" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" id="age" placeholder="请输入学生年龄(选填)" class="layui-input"
                       style="width: 350px;">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">所属系</label>
            <div class="layui-input-block">
                <input type="text" name="department" readonly="readonly" value="计算机系" class="layui-input layui-disabled"
                       style="width: 350px;">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline" style="width: 280px">
            <label class="layui-form-label mylabel">专业</label>
            <div class="layui-input-block">
                <%--<input type="text" name="major" placeholder="请输入学生就读专业" class="layui-input" style="width: 600px;">--%>
                <select name="major" id="major">
                    <option value="计算机科学与技术" selected>计算机科学与技术</option>
                    <option value="物联网工程">物联网工程</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label mylabel">年级</label>
            <div class="layui-input-block">
                <input type="text" id="grade" name="grade" class="layui-input"
                       style="width: 57px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" id="phone" placeholder="请输入学生的联系电话" class="layui-input"
                       style="width: 350px;">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label mylabel">电子邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" id="email" class="layui-input" style="width: 350px;">
            </div>
        </div>
    </div>
    <div style="float: right;margin-right: 40px">
        <div class="layui-input-block">
            <button type="button" id="btn" class="layui-btn layui-btn-normal">提交</button>
            <button type="button" id="btnClose" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>

<script src="${ctx}/static/js/index.js"></script>
</body>
</html>
